<template>
  <a-layout>
      <a-layout-sider collapsed :trigger="null" collapsed-width="660">
        <div class="card-container">
          <a-tabs v-model:activeKey="tabKey" type="card" ref="tabs" @change="change">
            <a-tab-pane key="1" tab="Modbus RTU">
              <RtuTab />
            </a-tab-pane>
            <a-tab-pane key="2" tab="Modbus TCP">
              <OverTcpTab />
            </a-tab-pane>
            <a-tab-pane key="3" tab="Client TCP">
              <TcpTab />
            </a-tab-pane>
            <a-tab-pane key="example" tab="设备案例"></a-tab-pane>
          </a-tabs>
          <!-- <Footer>footer</Footer> -->
        </div>
      </a-layout-sider>
      <a-layout class="sider">
        
          <a-layout-header>
            <div class="title">
              <span @click="clean">清空窗口</span>
            </div>
          </a-layout-header>

          <div class="result" :style="{height: height + 'px'}">
            <a-row v-for="(item, index) in receive" :key="index" type="flex">
              <a-col flex="100px">
                <span style="font-weight: lighter;font-size: 13px;">
                    {{ item.time }}
                  </span>
                <span style="float: right;" :style="{color: item.state.state == 'send' ? 'green' : 'red'}">
                  {{ item.state.text }}
                </span>

              </a-col>
              <a-col>
                <span class="code">
                    <b v-for="(char, index) in item.data" :key="index">
                        <template v-if="index%2 === 0">
                            {{ char }}{{ item.data[index+1] }}
                        </template>
                    </b>
                </span>

              </a-col>
            </a-row>
            </div>

      </a-layout>      

  </a-layout>

</template>

<script>
import { ipc } from '@/utils/ipcRenderer'
import TcpTab from './TcpTab.vue'
import RtuTab from './RtuTab.vue'
import OverTcpTab from './OverTcpTab.vue'
export default {
    components: {
        TcpTab, RtuTab, OverTcpTab
    },

    data () {
        return {
            tabKey: '1',
            collapsed: true,
            receive: [],
            height: 0
        }
    },

    mounted () {
        ipc.on('ipcMain', (event, args) => {
            console.log('ipcMain', event, args)
            if (args.channel == 'send') {
              this.pushData(args.data, {text:'发', state: 'send'})
            }
            if (args.channel == 'receive') {
              this.pushData(args.data, {text:'收', state: 'receive'})
            }
            if (args.channel == 'rtuclose') {
              this.$store.state.status = false
            }
        })
        this.change()
    },
    unmounted () {
      console.log('unmounted')
      ipc.removeAllListeners('ipcMain')
    },
    methods: {
      pushData (data, state) {
        if (this.receive.length > 100) {
          this.receive.splice(this.receive.length -1)
        }
        this.receive.unshift({
            data: data,
            time: new Date().toLocaleTimeString() + '.'+ (new Date()).getMilliseconds(),
            state,
        })
        this.$forceUpdate();
      },
      change (key) { 
        this.$nextTick(() => { 
          let height = this.$refs.tabs.$el.clientHeight
          this.height = height - 52
        })
        if (key == 'example') { 
          this.$router.push('example')
        }
      },
      clean () { 
        this.receive = []
      },
    },
}
</script>

<style scoped>
.card-container{
    background: #efefef;
    padding: 8px;
    min-height: 100%;
    position: relative;
}

:deep(.ant-tabs > .ant-tabs-nav) {
  margin: 0;
}

.card-container > .ant-tabs-card .ant-tabs-content {
  height: 120px;
  margin-top: -16px;
}
.card-container > .ant-tabs-card .ant-tabs-content > .ant-tabs-tabpane {
  padding: 16px;
  background: #fff;
}
.title span{
  cursor: pointer;
}
.result{
  min-height: calc(100vh - 64px);
  margin: 5px;
}
.code{
  margin-left: 6px;
}
.code > b{
  margin-right: 4px;
}


.ant-layout{
  min-height: 100%;
}
.ant-layout-sider{
  background: #efefef;
}
.sider{
  color: #fff;
  background: #333;
  height: 100%;
  max-height: 100%;
  overflow-y: hidden;
}
.ant-layout-header{
  height: 50px;
  line-height: 50px;
  color: #fff;
  text-align: center;
  font-size: 1.1em;
  font-weight: bold;
  overflow: hidden;
}
</style>